<template>
	<view  class="baseview fullheight">
	
	    <form @submit="formSubmit" >
	
				<view class="content flex-wrap flex-direction-row">
	                <text class="flex-item">姓名</text>
	                <input class="input"  maxlength="9" name="name" :value="name"/>
	            </view> 
	
	            <view class="content flex-wrap flex-direction-row">
	                <text class="flex-item">电话</text>
	                <input type="number" class="input"  maxlength="20" name="phone" :value="phone"/>
	            </view> 
	
	            <view class="content flex-wrap flex-direction-row">
	                <text  class="flex-item">地址</text>
	                <input placeholder-class="placeholder" class="input" maxlength="60" placeholder="小区、门牌等详细信息" name="detail" :value="detail"/>
	            </view> 
	
	            <view class="content flex-wrap flex-direction-row">
	                <text  class="flex-item">备注</text>
	                <input placeholder-class="placeholder" class="input" maxlength="60" placeholder="您的订单备注" name="note" :value="note"/>
	            </view> 
	
	            <view class="flex-wrap flex-direction-row">
	                <button type="warn" :disabled="index==-1" @click="deleteaddr" class="button flex-item">删除</button>
	                <button type="primary" form-type="submit" class="confirm button flex-item">确定</button>
	            </view>
	    </form>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: -1,
				    name: '',
				    phone: '',
				    detail: '',
				    note: '',
				    addrs: []
			}
		},
		onLoad(options) {
			  let that = this
			
			    this.index= options.index
			
			    uni.getStorage({
			      key: 'address',
			      success: function (res) {
			        that.addrs = res.data
			        if (that.index != -1) {
			          let address = that.addrs[that.index]
			            that.name= address.name,
			            that.phone= address.phone,
			            that.detail= address.detail,
			            that.note= address.note
			        }
			      }
			    })
		},
		methods: {
			
			  setAddressStorageSync: function () {
			    try {
			      uni.setStorageSync('address', this.addrs)
			    } catch (e) {
			    }
			  },
			
			  navigationBack: function () {
			    uni.navigateBack({
			      delta: 1, // 回退前 delta(默认为1) 页面
			    })
			  },
			
			  deleteaddr: function () {
			    if (this.index != -1) {
			      this.addrs.splice(this.index, 1)
			      this.setAddressStorageSync()
			      this.navigationBack()
			    }
			  },
			
			
			  //需要注意addrs不能为空，否则会出现push is not a function报警
			  formSubmit: function (e) {
				  console.log('confirm----'+e)
			    let myAddress = e.detail.value
			    if (this.index == -1) {
			      this.addrs.push(myAddress)
			    } else {
			      this.addrs[this.index] = myAddress
			    }
			    this.setAddressStorageSync()
			    this.navigationBack()
			  }

		}
	}
</script>

<style>


.fullheight{
    height: 100%;
}


.radio-group{
    margin-bottom: 20upx;
}

.label{
    font-size: 30upx;
    margin-right: 30upx;
}

.quicknotePlus{
    margin-top: 20upx;
}

.button{
    margin-top: 30upx;
    margin-left: 20upx;
    margin-right: 20upx;
}

.content text{
  font-size: 30upx;
  line-height: 55upx;
  margin-left: 10px;
}

.input{
    border-bottom: 1px solid lightgrey;
    margin-left: 20upx;
    flex: 6;
    font-size: 30upx;
}

.placeholder{
    font-size: 25upx;
}

.confirm{
  background-color: #008000;
}
</style>
